<template>
    <view class="base_info">
        <view class="row flex_b">
            <view class="row_l">工种</view>
            <view class="row_r">{{ orderDetail.workType }}</view>
        </view>
        <view class="row flex_b">
            <view class="row_l">用工时间</view>
            <view class="row_r">{{ orderDetail.workDate }}</view>
        </view>
        <view class="row flex_b">
            <view class="row_l">用工地点</view>
            <view class="row_r">{{ orderDetail.workPlace }} {{ orderDetail.address }}</view>
        </view>
    </view>
    <view class="base_info">
        <view class="row flex_b">
            <view class="row_l">付费模式</view>
            <view class="row_r" style="color: #FE6E04;">{{ orderDetail.feeType == 1 ? '一口价' : '计件' }}</view>
        </view>
        <view class="row flex_b">
            <view class=" row_l">{{ orderDetail.feeType == 1 ? '需要人数' : '件数' }}</view>
        <view class="row_r">{{ `${orderDetail.peopleNum}${orderDetail.feeType == 1 ? '人' : '件'}` }}</view>
    </view>
    <view class="row flex_b">
        <view class="row_l">我愿出价<text>（总价）</text></view>
        <view class="row_r">{{ orderDetail.money }}元</view>
    </view>
    </view>
    <view class="introduction">
        <view class="_title">内容介绍</view>
        <view class="_introduction">{{ orderDetail.introduction }}</view>
    </view>
    <view class="remark">
        <view class="_title">需求备注</view>
        <view class="_remark">{{ orderDetail.orderDsg }}</view>
        <view class="common_image_list">
            <myUploadImg :imgList="imgList" disabled preview></myUploadImg>
        </view>
    </view>
    <view class="money">
        <view class="_title">我的报价</view>
        <view class="_coupon flex_b">
            <view class="_coupon_l">优惠券</view>
            <view class="_coupon_r">
                <view class="usecoupon flex_c" v-if="orderDetail.couponMoney>0">{{ `使用${orderDetail.couponMoney/100}元抵用券` }}</view>
                <view>未使用</view>
                <!-- <up-icon name="arrow-right"></up-icon> -->
            </view>
        </view>
        <view class="_price flex_b">
            <view class="_price_l">已支付</view>
            <view class="_price_r">¥{{ orderDetail.pay }}</view>
        </view>
        <view class="price_tips">
            <view class="item">
                <image src="@/static/images/customerPage/icon_rule.png" />
                <text>计费规则</text>
            </view>
            <view class="line"></view>
            <view class="item">
                <image src="@/static/images/customerPage/icon_price.png" />
                <text>预估明细</text>
            </view>
        </view>
    </view>
    <view class="customer">
        <view class="customer_title flex_l">接单师傅</view>
        <view class="customer_info flex_b">
            <view class="customer_info_l">
                <view class="profile">
                    <image src="@/static/images/customerPage/profile_customer.png" />
                </view>
                <view class="customername">
                    <view style="margin-top: 4rpx;font-weight: 500;" v-if="checkChineseName(orderDetail.workerName as string)">{{ orderDetail.workerName?.substring(0,1) + "师傅" }}</view>
                    <view style="margin-top: 4rpx;font-weight: 500;" v-else>接单师傅</view>
                    <view style="margin-top: 8rpx;">{{ orderDetail.workerMobile }}</view>
                </view>
            </view>
            <view class="customer_info_r" @click="makePhoneCall">
                <image src="@/static/images/customerPage/icon_phone.png" />
                联系师傅
            </view>
        </view>
        <view class="evaluate flex_r">
            <view class="evaluate_btn flex_c" @click="toworkerComment">查看师傅评价</view>
        </view>
    </view>
</template>

<script setup lang="ts">
import type { OrderParams } from "@/types/order";
import myUploadImg from "@/components/my-uploadImg/my-uploadImg.vue";
import { ref, toRefs, watch } from "vue";
import { checkChineseName } from "@/utils/Validate";
const props = defineProps<{
    orderDetail: OrderParams
}>()
const { orderDetail } = toRefs(props)
const imgList = ref<string[]>([])

watch(orderDetail, (newVal: any) => {
    if (newVal.customerImages) {
        imgList.value = newVal.customerImages.split(",")
    }
})
const toworkerComment = () => {
    uni.navigateTo({
        url: '/pages/other/comment/comment?workUserId=' + orderDetail.value.workUserId
    })
}
// 拨打电话
const makePhoneCall = () => {
    uni.makePhoneCall({
        phoneNumber: orderDetail.value.workerMobile as string
    })
}
</script>

<style lang="scss" scoped>
.base_info {
    width: 698rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 0 24rpx;
    box-sizing: border-box;
    margin: 0 auto;
    margin-top: 24rpx;
}

.row {
    width: 100%;
    min-height: 96rpx;
    border-bottom: 2rpx solid #F8F8F8;
    font-size: 28rpx;
    color: #222222;

    &:nth-last-child(1) {
        border: none;
    }

    &_l {
        width: 35%;

        text {
            font-size: 24rpx;
            color: #888888;
        }
    }

    &_r {
        width: 65%;
        text-align: right;
    }
}
.introduction{
    width: 698rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 0 24rpx;
    padding-bottom: 24rpx;
    box-sizing: border-box;
    margin: 0 auto;
    margin-top: 24rpx;
    ._title {
        height: 92rpx;
        font-weight: 500;
        font-size: 28rpx;
        color: #222222;
        border-bottom: 2rpx solid #F8F8F8;
        line-height: 92rpx;
    }

    ._introduction {
        font-size: 26rpx;
        color: #222222;
        margin: 24rpx 0 36rpx 0;
    }
}

.remark {
    width: 698rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 0 24rpx;
    box-sizing: border-box;
    margin: 0 auto;
    margin-top: 24rpx;

    ._title {
        height: 92rpx;
        font-weight: 500;
        font-size: 28rpx;
        color: #222222;
        border-bottom: 2rpx solid #F8F8F8;
        line-height: 92rpx;
    }

    ._remark {
        font-size: 26rpx;
        color: #222222;
        margin: 24rpx 0 36rpx 0;
    }
}

.common_image_list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    ._img {
        width: 144rpx;
        height: 144rpx;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        background-color: #ccc;
        margin-right: 16rpx;
        margin-bottom: 24rpx;

        &:nth-child(4n) {
            margin-right: 0;
        }

        image {
            width: 100%;
            height: 100%;
            border-radius: 16rpx;
        }
    }
}

.money {
    width: 698rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 0 24rpx;
    box-sizing: border-box;
    margin: 0 auto;
    margin-top: 24rpx;

    ._title {
        height: 92rpx;
        line-height: 92rpx;
        font-weight: 500;
        font-size: 28rpx;
        color: #222222;
        border-bottom: 2rpx solid #F8F8F8;
    }

    ._coupon {
        height: 88rpx;
        font-size: 28rpx;
        color: #222222;
        border-bottom: 2rpx solid #F8F8F8;

        ._coupon_r {
            display: flex;

            .usecoupon {
                width: 196rpx;
                height: 38rpx;
                background: linear-gradient(90deg, #FF7226 0%, #FF1D1D 100%);
                border-radius: 28rpx 28rpx 28rpx 28rpx;
                font-size: 24rpx;
                color: #FFFFFF;
                margin-right: 4rpx;
            }
        }
    }

    ._price {
        height: 88rpx;

        ._price_l {
            font-weight: 500;
            font-size: 32rpx;
            color: #222222;
        }

        ._price_r {
            font-size: 48rpx;
            color: #222222;
        }
    }

    .price_tips {
        display: flex;
        justify-content: center;
        padding-bottom: 28rpx;

        .item {
            height: 38rpx;
            font-size: 26rpx;
            color: #888888;
            display: flex;
            align-items: center;

            image {
                width: 28rpx;
                height: 28rpx;
                margin-right: 12rpx;
            }
        }

        .line {
            width: 2rpx;
            height: 36rpx;
            background: #888888;
            margin: 0 48rpx;
        }
    }
}

.customer {
    width: 698rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 0 24rpx;
    box-sizing: border-box;
    margin: 0 auto;
    margin-top: 24rpx;
    margin-bottom: 24px;

    .customer_title {
        height: 92rpx;
        font-weight: 500;
        font-size: 28rpx;
        color: #222222;
        border-bottom: 2rpx solid #F8F8F8;
    }

    .customer_info {
        height: 136rpx;
        padding: 24rpx 0;
        box-sizing: border-box;

        .customer_info_l {
            display: flex;

            .profile {
                width: 88rpx;
                height: 88rpx;
                background-color: #ccc;
                border-radius: 50%;
                margin-right: 20rpx;

                image {
                    width: 100%;
                    height: 100%;
                }
            }

            .customername {
                font-weight: 500;
                font-size: 26rpx;
                color: #222222;
            }
        }

        .customer_info_r {
            font-size: 24rpx;
            color: #555555;
            display: flex;
            align-items: center;

            image {
                width: 36rpx;
                height: 36rpx;
                margin-right: 10rpx;
            }
        }
    }

    .evaluate {
        height: 102rpx;

        .evaluate_btn {
            width: 260rpx;
            height: 70rpx;
            background: #FE6E04;
            border-radius: 35rpx 35rpx 35rpx 35rpx;
            font-size: 30rpx;
            color: #FFFFFF;
        }
    }
}
</style>